/*
 * @Author: Royce
 * @Date: 2019-07-16 11:43:10
 * @Des: []
 * @flow
 */

import * as React from 'react';
import {Dimensions} from 'react-native';
import EmptyView, {type PropTypes as emptyViewTypes, StatusType} from './EmptyView';
import isIphoneX from './PhoneUtl';

const IPHONEX_STATUS_BAR_HEIGHT = 44;
const IPHONEX_BOTTOM_MARGIN = 34;
const BOTTOM_TAB_TAR_HEIGHT = 49;
const HEADER_HEIGHT = 44;
const SCREEN_HEIGHT: number = Dimensions.get('window').height;
const extraHeight = isIphoneX() ? IPHONEX_STATUS_BAR_HEIGHT + IPHONEX_BOTTOM_MARGIN : 0;

interface Props {
    loadingState?: number; // Failure 4
    onReloadHandler?: $PropertyType<emptyViewTypes, 'onReloadHandler'>;
    topHeight?: number;
    bottomHeight?: number,
    extElement?: Object,
}

interface State {
    emptyViewType: $PropertyType<emptyViewTypes, 'emptyViewType'>;
}


export default function withEmptyView(WrappedComponent) {
    class Wrapper extends React.Component<Props, State> {
        static defaultProps = {
            onReloadHandler: () => null,
            topHeight: HEADER_HEIGHT,
            bottomHeight: BOTTOM_TAB_TAR_HEIGHT,
            loadingState: StatusType.IDLE
        };


        constructor(props) {
            super(props);
        };

        state = {
            emptyViewType: 'NODATA',
            imageSource: undefined,
        };


        componentDidMount(): void {
            this.loadData()
        }

        loadData = async () => {
            this.setState({emptyViewType: 'LOADING',});
            setTimeout(async()=>{
                try {
                    const data = await this.props.onReloadHandler();
                    if (data.code) {
                        if (data.data && data.data.total === 0) {
                            this.setState({emptyViewType: 'NODATA',});
                        }
                    }
                } catch (e) {
                    __DEV__&&console.warn(e);
                    if (e.message) {
                        this.setState({emptyViewType: 'FAIL',});
                    }else{
                        this.setState({emptyViewType: 'ERROR'});
                    }

                }
            },2000);

        };


        //
        // componentDidUpdate(prevProps: Props) {
        //     if (prevProps.loadingState !== 4 && this.props.loadingState === 4) {
        //         this.setState({
        //             emptyViewType: 'ERROR'
        //         });
        //     } else if (prevProps.loadingState !== 1 && this.props.loadingState === 1) {
        //         this.setState({emptyViewType: 'LOADING',});
        //     } else if ((prevProps.loadingState !== 3 && this.props.loadingState === 3) || (prevProps.loadingState !== 0 && this.props.loadingState === 0)) {
        //         this.setState({emptyViewType: 'NODATA',});
        //     }else if(prevProps.loadingState !== 5 && this.props.loadingState === 5) {
        //         this.setState({emptyViewType: 'FAIL'});
        //     }
        // }


        render() {
            const {topHeight = HEADER_HEIGHT, bottomHeight = BOTTOM_TAB_TAR_HEIGHT, extElement, reloadTitle} = this.props;
            return (
                <WrappedComponent
                    {...this.props}
                    ListEmptyComponent={
                        <EmptyView
                            height={SCREEN_HEIGHT - topHeight - bottomHeight - extraHeight}
                            reloadTitle={reloadTitle}
                            onReloadHandler={this.loadData}
                            {...this.state}
                            extElement={extElement}
                        />
                    }
                />
            );
        }
    }

    return Wrapper
}

